<template>
    <div class="login-layout">
        <div class="loginBox gs-filter flex-between" v-show="haslogin">
            <div class="login-bg-1">
                <img :src="require('@/assets/picwish.png')"/>
            </div>
            <div class="login-bg-2">
                <h3 class="login-title">登 录</h3>
                <el-input
                    class="login-input"
                    placeholder="请输入账号"
                    v-model="username"
                    size="large"
                    clearable>
                    <template #prefix>
                        <el-icon class="el-input__icon"><user /></el-icon>
                    </template>
                </el-input>
                <el-input 
                    class="login-input" 
                    placeholder="请输入密码" 
                    v-model="password" 
                    show-password
                    clearable
                    size="large"
                    @keyup.enter="login">
                    <template #prefix>
                        <el-icon class="el-input__icon"><lock /></el-icon>
                    </template>
                </el-input>
                <div class="flex-between">
                    <el-checkbox v-model="isChecked">记住我</el-checkbox>
                    <el-link :underline="false" @click="forgetVisible=true">忘记账号和密码</el-link>
                </div>
                <el-button class='loginBtn' type="primary" @click="login" :loading="loginLoading">登录</el-button>
                <div>
                    <el-button type="text" :disabled='loginLoading' @click="haslogin=false">还没有账号？去注册</el-button>
                </div>
            </div>
        </div>

        <div class="loginBox gs-filter" v-show="!haslogin">
            <h3 class="login-title">注 册</h3>
            <el-input
                class="login-input-1"
                placeholder="请输入邮箱"
                v-model="email"
                size="large"
                clearable>
                <template #prefix>
                    <el-icon class="el-input__icon"><message /></el-icon>
                </template>
            </el-input>
            <el-input 
                class="login-input-1" 
                placeholder="请输入密码" 
                v-model="registerPassword" 
                show-password
                size="large"
                maxlength="16"
                minlength="6"
                clearable
                @keyup.enter="login">
                <template #prefix>
                    <el-icon class="el-input__icon"><lock /></el-icon>
                </template>
            </el-input>
            <el-input
                class="login-input-1"
                placeholder="请输入昵称"
                v-model="nickname"
                maxlength="8"
                size="large"
                clearable>
                <template #prefix>
                    <el-icon class="el-input__icon"><editPen /></el-icon>
                </template>
            </el-input>
            <el-select 
                v-model="sex"
                clearable
                class="login-input-1" 
                placeholder="请选择性别" 
                size="large">
                <el-option
                v-for="item in sexOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
                />
            </el-select>
            <el-button type="primary" class='registerBtn'  @click="register"  :loading="loginLoading">注册</el-button>
            <div>
                <el-button type="text" :disabled='loginLoading' @click="haslogin=true">已经有账号？去登录</el-button>
            </div>
        </div>
        <el-dialog
            title="注册成功"
            v-model="dialogVisible"
            custom-class="z-dialog"
            :width="350"
            center
            >
            <div class="text-center">恭喜您注册成功！您将成为我们的第{{ranking}}位使用者，您的账号为
                <span style="font-weight:600">{{username}}</span>
                ，请记住账号喔~
            </div>
            <template #footer>
                <span class="dialog-footer">
                    <!-- <el-button @click="dialogVisible=false">取 消</el-button> -->
                    <el-button type="primary" @click="goLogin">去登录</el-button>
                </span>
            </template>
        </el-dialog>
        <forgetPassword v-if="forgetVisible" :visible="forgetVisible" @close="forgetVisible=false"></forgetPassword>
    </div>
</template>

<script src='./index.ts' lang="ts">
</script>
<style lang='scss' scoped src='./index.scss'>
</style>

